Scroll

前言

• 由於此專案HTML、CSS與JavaScript重點較多，因此將切三篇文章說明

功能說明

1. Navbar :
   • RWD(響應式網頁設計)
   • 固定於畫面上方
   • 點擊按鈕將下滑至對應內容
2. tour按鈕 : 點擊後下滑至tour部分
3. 按鈕各自對應內容
4. 回最上方之按鈕

HTML重點

1. Navbar :

   <nav id="nav">
       <div class="nav-center">
   
           <!-- nav header -->
           <div class="nav-header">
   
               <!-- logo -->
               <img src="./logo.svg" class="logo" alt="logo" />
   
               <!-- 選單按鈕 -->
               <button class="nav-toggle">
                 <i class="fas fa-bars"></i>
               </button>
           </div>
   
           <!-- links -->
           <div class="links-container">
               <ul class="links">
                 <li>
                   <a href="#home" class="scroll-link">home</a>
                 </li>
                 <li>
                   <a href="#about" class="scroll-link">about</a>
                 </li>
                 <li>
                   <a href="#services" class="scroll-link">services</a>
                 </li>
                 <li>
                   <a href="#tours" class="scroll-link">tours</a>
                 </li>
               </ul>
           </div>
       </div>
   </nav>
   

   • 將整個Navbar的ID設為nav
   • 將選單按鈕的Class設為nav-toggle
   • 選單按鈕的icon一樣來自font awesome
   • 將整個按鈕選單<div>的Class設為links-container
   • 將整個按鈕選單<ul>的Class設為links
   • 將單一連結按鈕<a>元素的Class設為scroll-link
   • 四個連結按鈕的連結id等同於其名稱

2. Banner

   <div class="banner">
       <div class="container">
           <h1>scroll project</h1>
           <p>Lorem ipsum ...</p>
   
           <!-- Tour按鈕 -->
           <a href="#tours" class="scroll-link btn btn-white">explore tours</a>
   
       </div>
   </div>
   

   • Tour按鈕的Class一樣設為scroll-link

3. 對應內容

   <!-- about -->
   <section id="about" class="section">
     <div class="title">
       <h2>about <span>us</span></h2>
     </div>
   </section>
   <!-- services、contant皆與此相同 -->
   

   • 對應內容的id可以連結有相同連結id的按鈕
     • 例如，about按鈕的href="#about"，可以連結到about的對應內容

4. footer

   <!-- footer -->
   <footer class="section">
       <p>
           copyright &copy; backroads travel tours company
           <span id="date"></span>. all rights reserved
       </p>
   </footer>
   
   <!-- 回頂層按鈕 -->
   <a class="scroll-link top-link" href="#home">
       <i class="fas fa-arrow-up"></i>
   </a>
   

   • 回頂層按鈕的class一樣設為scroll-link，連結id設為#home
   • copyright中的年份，將透過id="date"在JavaScript中控制